<template>
  <l-content :app="app" width="1200px" no-padding no-breadcrumb>
    <el-card>
      <el-form :inline="true" size="mini">
        <el-form-item style="line-height: 30px">
          <el-radio-group v-model="radioAirline" size="mini" class="radio-button"
                          @change="onAirlineChange"
                          style="width: 1000px;line-height: 30px">
            <el-radio v-for="item in options.airline"
                      style="text-align: center; min-width: 120px"
                      :label="item"
                      :key="item.key"
                      border>{{item.value}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-card v-if="radioAirline">
        <el-form size="mini" :model="form" ref="form">
          <el-form-item>
            <el-button type="primary" @click="onAdd">新增一行</el-button>
            <easy-button type="primary" @click="onSave">保存</easy-button>
            <span class="font-gray">(所有操作均需要保存)</span>
          </el-form-item>
          <el-table
            :cell-style="{'vertical-align': 'top'}"
            v-loading="loading"
            border
            class="el-easy-ui-table"
            :data="form.list">
            <el-table-column :label="radioAirline.value">
              <el-table-column
                label="舱等/舱位"
                min-width="110"
              >
                <template slot-scope="scope">
                  <!--el-form-item>
                    <el-select v-model="scope.row.classLevel" clearable style="width: 100%">
                      <el-option value="F" label="头等舱"/>
                      <el-option value="C" label="商务舱"/>
                      <el-option value="Y" label="经济舱"/>
                    </el-select>
                  </el-form-item-->
                  <el-form-item>
                    <el-input type="textarea"
                              placeholder="多个舱位用/隔开"
                              v-model="scope.row.subClass"
                              @input="v => scope.row.subClass = v.toUpperCase()"
                              :autosize="{ minRows: 2, maxRows: 8}"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <!--<el-table-column
                label="折扣"
                min-width="80">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input v-model="scope.row.discount"/>
                  </el-form-item>
                </template>
              </el-table-column>-->
              <el-table-column
                label="退票规定"
                width="330">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input type="textarea"
                              placeholder="退票规定"
                              v-model="scope.row.refundRuleRemark"
                              :autosize="{ minRows: 2, maxRows: 8}"/>
                  </el-form-item>
                  <div v-for="(item, idx) in scope.row.detailList" :key="idx" v-if="item.type == 1">
                    <span class="font-red">*</span>
                    <span>起飞前</span>
                    <el-form-item style="display: inline-block" :prop="'list[' + scope.$index + '].detailList[' + idx + '].hoursBefore'" :rules="rules.hoursBefore">
                      <el-input class="w60" v-model="item.hoursBefore"/>
                    </el-form-item>
                    <span>小时</span>
                    <span>扣</span>
                    <el-form-item style="display: inline-block" :prop="'list[' + scope.$index + '].detailList[' + idx + '].rate'" :rules="rules.rate">
                      <c-percent-input class="w80" v-model="item.rate"/>
                    </el-form-item>
                    <span><el-button type="text" size="mini" @click="scope.row.detailList.splice(idx, 1)"><i class="fa fa-times"></i></el-button></span>
                  </div>
                  <el-form-item>
                    <el-button @click="onAddDetail(scope.row.detailList, 1)" style="width: 250px"><i class="fa fa-plus"></i></el-button>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="变更规定"
                width="330"
              >
                <template slot-scope="scope">
                  <el-form-item >
                    <el-input type="textarea"
                              placeholder="变更规定"
                              v-model="scope.row.changeRuleRemark"
                              :autosize="{ minRows: 2, maxRows: 8}"/>
                  </el-form-item>
                  <div v-for="(item, idx) in scope.row.detailList" :key="idx" v-if="item.type == 2">
                    <span>起飞前</span>
                    <el-form-item style="display: inline-block"  :rules="rules.hoursBefore">
                      <el-input class="w60" v-model="item.hoursBefore"/>
                    </el-form-item>
                    <span>小时</span>
                    <span>扣</span>
                    <el-form-item style="display: inline-block" :rules="rules.rate">
                      <c-percent-input class="w80" v-model="item.rate"/>
                    </el-form-item>
                    <span><el-button type="text" size="mini" @click="scope.row.detailList.splice(idx, 1)"><i class="fa fa-times"></i></el-button></span>
                  </div>
                  <el-form-item>
                    <el-button @click="onAddDetail(scope.row.detailList, 2)" style="width: 250px"><i class="fa fa-plus"></i></el-button>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="签转"
                min-width="100"
              >
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input type="textarea"
                              placeholder="签转"
                              v-model="scope.row.visaRuleRemark"
                              :autosize="{ minRows: 4, maxRows: 8}"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                min-width="120"
                label="生效时间"
              >
                <template slot-scope="scope">
                  <el-form-item>
                    <el-date-picker v-model="scope.row.effectTime" style="width: 100%"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="90"
              >
                <template slot-scope="scope">
                  <el-form-item>
                    <c-pop-button p-msg="确认删除吗？" type="danger" size="mini" @click="onDelete($event, scope.$index)">删除</c-pop-button>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
      </el-card>
    </el-card>
  </l-content>
</template>

<script>

export default {
  name: 'AirCustomBookingRule',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      loading: false,
      radioAirline: null,
      options: {
        airline: []
      },
      query: {
        airline: ''
      },
      form: {
        list: []
      },
      rules: {
        hoursBefore: this.$checkRules.customBookingRule.hoursBefore,
        rate: this.$checkRules.customBookingRule.rate
      }
    }
  },
  created () {
    this.$service.options.getAirLineOption().then(res => {
      this.options.airline = res.data
    })
  },
  methods: {
    onAirlineChange () {
      this.loading = true
      this.query.airline = this.radioAirline.key
      this.$service.airCustomerRule.queryCustomerRuleList(this.query).then(res => {
        this.form.list = res.data
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      }).finally(() => {
        this.loading = false
      })
    },
    onSave (done) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$confirm('是否确认保存？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$service.airCustomerRule.saveCustomerRule({'airline': this.query.airline, 'list': this.form.list}).then(res => {
              this.onAirlineChange()
            }).finally(done)
          }).catch(done)
        } else {
          this.$alert('校验未通过', '提示')
          done()
        }
      })
    },
    onAdd () {
      const detailList = []
      this.form.list.push({
        airline: this.radioAirline.key,
        airlineName: this.radioAirline.value,
        subClass: null,
        classLevel: null,
        discount: null,
        refundRuleRemark: null,
        changeRuleRemark: null,
        visaRuleRemark: null,
        effectTime: null,
        detailList: detailList
      })
      this.onAddDetail(detailList, 1)
      this.onAddDetail(detailList, 2)
    },
    onDelete (btn, idx) {
      this.form.list.splice(idx, 1)
      btn.isLoading(false)
    },
    onAddDetail (list, type) {
      list.push({
        type: type,
        hoursBefore: null,
        rate: null
      })
    }
  }
}
</script>

<style></style>
